<template>
  <div class="public">
    <a-card :bordered="false" style="border-radius:8px" :bodyStyle="{ padding: '14px 23px 8px 23px' }">
      <div class="flex row_bet">
        <div class="card_title" style="margin-bottom:11px;">
          商品统计
        </div>
      </div>
      <div class="header_box">
        <div class="header-info">
          <div class="title">总通过商品</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.all_num == null ? 0 : parseFloat(service.all_num)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">在线商品</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.on_line_num == null ? 0 : parseFloat(service.on_line_num)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">被翘商品</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.up_num == null ? 0 : parseFloat(service.up_num)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">昨天到期商品</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.last_num == null ? 0 : parseFloat(service.last_num)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">明天到期商品</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.add_day_num == null ? 0 : parseFloat(service.add_day_num)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">七天到期商品</div>
          <div class="datainfo">
            <countTo :startVal="startVal" :decimals="0" :endVal="service.day_num" :duration="3000"></countTo>
          </div>
        </div>
      </div>
    </a-card>
    <a-card :bordered="false" style="border-radius:8px;margin-top:10px;">
      <div class="card_title">
        商品列表
      </div>
      <div class="groupbox flex row_bet flex_wrap">
        <div class="btns" style="margin-bottom: 5px;">
          <a-radio-group class="br4" :value="type" @change="dobtns">
            <a-radio-button value="a">
              所有商品
            </a-radio-button>
            <a-radio-button :value="1">
              在线商品
            </a-radio-button>
            <a-radio-button :value="2">
              被翘商品
            </a-radio-button>
            <a-dropdown key="971110">
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="3">昨天到期</a-menu-item>
                <a-menu-item key="4">明天到期</a-menu-item>
                <a-menu-item key="5">七天到期</a-menu-item>
              </a-menu>
              <a-radio-button
                @click.stop="stop"
                :class="[this.type===3||this.type===4||this.type===5?'ant-radio-button-wrapper-checked':'']"
                style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;">
                {{ typename }}
                <a-icon type="down"/>
              </a-radio-button>
            </a-dropdown>
          </a-radio-group>
        </div>
        <div class="flex flex_wrap">
          <a-input
            v-model="eventId"
            class="br4"
            style="width:102px;margin-right: 5px;margin-bottom: 5px;"
            placeholder="活动ID"
            allowClear/>
          <a-input
            v-model="search"
            class="br4"
            style="width:200px;margin-right: 5px;margin-bottom: 5px;"
            placeholder="标题/商品ID/店铺名"
            allowClear/>
          <a-button
            type="primary"
            :disabled="btnloading"
            class="br4"
            style="margin-right: 5px;margin-bottom: 5px;"
            @click="dopasssearch">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ btnloading===true?'搜索中...':'搜索' }}
          </a-button>
          <a-button class="br4" @click="exportToExcel">导出</a-button>
        </div>
      </div>
      <div class="activitytable">
        <a-table
          :columns="columns"
          :rowKey="activity => activity.id"
          :dataSource="activity"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="pictUrl" slot-scope="text, row">
            <div class="goodsinfo">
              <img
                :src="row.pictUrl"
                alt=""
                srcset=""
                style="width:77px;height:77px;margin-right:15px;border-radius: 8px;"
              />
              <div class="info-right">
                <div class="line-1">
                  <a
                    :href="'https://detail.tmall.com/item.htm?id='+row.itemId"
                    target="_blank"
                    rel="noopener noreferrer"> {{ row.title }}</a>
                </div>
                <div class="flex row_bet" style="margin:8px 0;">
                  <span>￥{{ row.zkFinalPrice }}</span>
                  <div>
                    <span class="p_r_10"> 券后价 ￥{{ row.couponZkFinalPrice }}</span>
                    <span> 销量{{ row.biz30day }}</span>
                  </div>
                </div>
                <div class="flex row_bet">
                  <span>商品ID:{{ row.itemId }}</span> <span>店铺:{{ row.shopTitle }}</span>
                </div>
              </div>
            </div>
          </div>
          <div slot="goods_status" slot-scope="text, row">
            <div :style="{color:row.new!=='0'?'#FF0303':row.goods_status==='正常'?'#39C15B':'#96989B'}">
              {{ row.new=='0'? row.goods_status:'被翘'+row.new+'%' }}
            </div>
          </div>
          <div slot="startTime" slot-scope="text, row">
            <div>起:{{ row.startTime }}</div>
            <div>止:{{ row.endTime }}</div>
          </div>
          <div slot="commissionRate" slot-scope="text, row">
            <div style="color: #2396F9">{{ row.commissionRate }}%</div>
          </div>
          <div slot="serviceRate" slot-scope="text, row">
            <div style="color: #2396F9">{{ row.serviceRate }}%</div>
          </div>
          <div slot="alipayNum" slot-scope="text, row">
            <div>有效订单数：{{ row.alipayNum }}</div>
            <div>预估服务费：{{ row.serviceFee }}</div>
          </div>
          <div slot="active" slot-scope="row">
            <div>
              <a-button type="link" @click="goentering(row)">招商录入</a-button>
            </div>
            <a-button type="link" @click="goaudit(row)">出单详情</a-button>
          </div>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
  import moment from 'moment'
  import countTo from 'vue-count-to'
  import { getgoodsStatus, getonlinegoods } from '@/api/goodsApi'
  import { exportExcel } from '@/assets/js/Export2Excel'

  export default {
    name: 'Public',
    components: {
      countTo
    },
    data () {
      return {
        moment,
        btnloading: false,
        startVal: 0,
        endVal: 0,
        service: {
          all_num: 0, // 在线商品数
          on_line_num: 0, //  在线商品数
          last_num: 0, // 昨天到期商品数
          add_day_num: 0, // 明天到期商品数
          day_num: 0 // 七天到期商品数
        },
        type: 'a',
        status: 1,
        search: '',
        columns: [
          {
            title: '商品信息',
            align: 'center',
            width: 400,
            dataIndex: 'pictUrl',
            scopedSlots: {
              customRender: 'pictUrl'
            }
          },
          {
            title: '商品状态',
            // width: 150,
            align: 'center',
            dataIndex: 'goods_status',
            scopedSlots: {
              customRender: 'goods_status'
            }
          },
          {
            title: '活动ID',
            // width: 150,
            align: 'center',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '排期时间',
            align: 'center',
            dataIndex: 'startTime',
            scopedSlots: {
              customRender: 'startTime'
            }
          },
          {
            title: '佣金比例',
            align: 'center',
            // width: 500,
            dataIndex: 'commissionRate',
            scopedSlots: {
              customRender: 'commissionRate'
            }
          },
          {
            title: '服务费率',
            align: 'center',
            dataIndex: 'serviceRate',
            scopedSlots: {
              customRender: 'serviceRate'
            }
          },
          {
            title: '通过时间',
            align: 'center',
            dataIndex: 'passDate',
            scopedSlots: {
              customRender: 'passDate'
            }
          },
          {
            title: '优惠券',
            align: 'center',
            dataIndex: 'couponZkFinalPrice',
            scopedSlots: {
              customRender: 'couponZkFinalPrice'
            }
          },
          {
            title: '出单统计',
            align: 'center',
            dataIndex: 'alipayNum',
            scopedSlots: {
              customRender: 'alipayNum'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          // {
          //   id: 1443705, // 自增i9d
          //   pictUrl: '//img.alicdn.com/bao/uploaded/i1/2088166626/O1CN01ao5Pc21yoky7UFfOX_!!2088166626-0-picasso.jpg', // 图片
          //   title: '烤乐仕棒棒糖模具家用自制硅胶diy材料手工巧克力奶酪棒儿童QQ糖', // 商品名称
          //   zkFinalPrice: '4.50', // 原价
          //   couponZkFinalPrice: '4.50', // 卷后价
          //   biz30day: 10763, // 销量
          //   itemId: '580182556708', // 商品id
          //   shopTitle: '烤乐仕旗舰店', // 店铺名称
          //   eventId: '386815419', // 活动id
          //   startTime: '2020-11-12', // 开始时间
          //   endTime: '2020-12-13', // 结束时间
          //   commissionRate: '20.00', // 佣金比例
          //   serviceRate: '10.00', // 服务费率
          //   passDate: '2020-11-12', // 通过时间
          //   alipayNum: 0, // 有效订单数
          //   serviceFee: '0.00', // 服务费
          //   new: '0', // 被翘佣金
          //   goods_status: '正常' // 商品状态
          // }
        ],
        loading: false,
        passsearch: '',
        passstart: '',
        passend: '',
        pagination: {
          pageSize: 15,
          page: 1
        },
        // severstr:
        //   moment()
        //     .month(moment().month())
        //     .startOf('month')
        //     .format('YYYY/MM/DD') +
        //   ' 至 ' +
        //   moment().format('YYYY/MM/DD'),
        // pass:
        //   moment()
        //     .month(moment().month())
        //     .startOf('month')
        //     .format('YYYY/MM/DD') +
        //   ' 至 ' +
        //   moment().format('YYYY/MM/DD'),
        typename: '到期商品',
        eventId: ''
      }
    },
    watch: {
      type: function (val) {
        switch (val) {
          case 3:
            this.typename = '昨天到期'
            break
          case 4:
            this.typename = '明天到期'
            break
          case 5:
            this.typename = '七天到期'
            break
          default:
            this.typename = '到期商品'
            break
        }
      }
    },
    computed: {},
    created () {
      this.getgoodsStatus()
      this.getonlinegoods(1, 15, 'a')
    },
    mounted () {
    },
    methods: {
      exportToExcel () {
        require.ensure([], () => {
          const tHeader = ['商品名称', '原价', '券后价', '30天销量', '店铺名称', '开始时间', '结束时间', '通过时间',
            '佣金比例', '服务费', '最新佣金', '服务费', '有效订单数']// Excel的表格第一行的标题
          const filterVal = ['title', 'zkFinalPrice', 'couponZkFinalPrice', 'biz30day', 'shopTitle', 'startTime',
            'endTime', 'passDate', 'commissionRate', 'serviceRate', 'new', 'serviceFee', 'alipayNum'
          ]
          const list = this.activity
          const excelName = '商品列表数据'// 报表名称
          const data = this.formatJson(filterVal, list)
          exportExcel(tHeader, data, excelName)
        })
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      stop () {
        return false
      },
      dobtns (val) {
        // console.log(val.target.value)
        if (val.target.value !== undefined) {
          this.type = val.target.value
          this.getonlinegoods(1, 15, this.type, this.eventId, this.search)
        }
      },
      handleMenuClick (e) {
        // console.log('click', e.key)
        this.type = parseInt(e.key)
        this.getonlinegoods(1, 15, this.type, this.eventId, this.search)
      },
      dopasssearch () {
        this.btnloading = true
        //   console.log(this.search)
        this.getonlinegoods(1, 15, this.type, this.eventId, this.search)
      },
      // 商品列表
      getonlinegoods (page, pagesize, type, eventId, search) {
        this.loading = true
        getonlinegoods({
          page: page,
          pagesize: pagesize,
          type: type, // 1在线商品，2被翘商品，3昨天到期，4明天到期，5七天到期
          eventId: eventId,
          search: search
          // sort: 2,//可选升降序：1通过时间，2有效订单数，3开始时间，4结束时间，5预估服务费
          // desc: 2//1降序 2升序
        })
          .then(res => {
            console.log(res)
            this.activity = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.btnloading = false
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      goaudit (row) {
        console.log(row)
        this.$store.dispatch('setIssuename', row)
        this.$router.push({
          path: '/goods/goodsIssue'
        })
      },
      goentering (row) {
        console.log(row)
        this.$store.dispatch('setIssuename', row)
        this.$router.push({
          path: '/attractinvest/entering'
        })
      },
      getgoodsStatus () {
        getgoodsStatus()
          .then(res => {
            // console.log(res)
            this.service = res.data
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.getonlinegoods(params.page, 15, this.type, this.eventId, this.search)
      }
    }
  }
</script>

<style lang="less" scoped>
  .public {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 22px;
      font-weight: 600;
    }

    .header_box {
      min-height: 101px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .header-info {
        margin-right: 10px;

        .title {
          color: rgba(16, 16, 16, 0.7);
          font-size: 12px;
        }

        .datainfo {
          font-size: 28px;
          color: #101010;
          font-weight: 600;
        }
      }
    }

    .groupbox {
      margin-bottom: 16px;

      /deep/ .ant-radio-wrapper {
        color: #96989b;
        font-weight: 600;
      }

      /deep/ .ant-radio {
        display: none;
      }

      /deep/ .ant-radio-wrapper-checked {
        font-weight: 600;
        color: #101010;
      }

      /deep/ .ant-input {
        border-radius: 4px;
        height: 30px;
      }

      .btns {
        /deep/ .ant-btn {
          height: 30px;
        }
      }
    }

    .goodsinfo {
      display: flex;

      .info-right {
        width: 300px;
        height: 100%;
        text-align: left;
      }
    }
  }
</style>
